<template>
  <view>
    <!-- 顶部自定义导航栏 -->
    <view class="nav-bar" :class="{ dark: isDark }">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">信息修改</view>
    </view>

    <!-- 内容区域 -->
    <view class="container" :class="{ dark: isDark }">
      <!-- 可编辑项目列表 -->
      <view class="edit-list">
        <!-- 修改头像项 -->
        <view class="edit-item" @click="goToEditField('avatar')">
          <text class="label">头像</text>
          <!-- 头像图片 -->
          <image class="avatar" :src="user.avatar"></image>
          <!-- 右侧箭头 -->
          <text class="arrow">></text>
        </view>

        <!-- 修改名字项 -->
        <view class="edit-item" @click="goToEditField('username')">
          <text class="label">名字</text>
          <!-- 当前名字 -->
          <text class="value">{{ user.username }}</text>
          <text class="arrow">></text>
        </view>

        <!-- 修改账号项 -->
        <view class="edit-item" @click="goToEditField('email')">
          <text class="label">账号</text>
          <!-- 当前账号 -->
          <text class="value">{{ user.email }}</text>
          <text class="arrow">></text>
        </view>

        <!-- 修改小车名称 -->
        <view class="edit-item" @click="goToEditField('carname')">
          <text class="label">小车</text>
          <!-- 当前小车名 -->
          <text class="value">{{ user.carname }}</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isDark: false, // 是否开启夜间模式
      user: {
        id: 20, // 用户ID
        username: '', // 用户名
        email: '', // 用户邮箱/账号
        carname: '', // 小车名称
        avatar: '/static/avatar.png' // 默认头像路径
      }
    }
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    this.isDark = getApp().globalData.darkMode;

    // 优先从全局变量获取用户信息
    let globalUser = getApp().globalData.user;
    if (globalUser) {
      this.user = globalUser;
    } else {
      // 如果全局无数据，则调用接口获取
      this.fetchUserInfo();
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },
    
    /**
     * 跳转到对应字段的编辑页面
     * @param {string} field - 要编辑的字段名(avatar/username/email/carname)
     */
    goToEditField(field) {
      uni.navigateTo({
        url: `/pages/edit-field/edit-field?field=${field}&value=${encodeURIComponent(this.user[field])}`
      });
    },
    
    /**
     * 从服务器获取用户信息
     */
    fetchUserInfo() {
      uni.request({
        url: `http://localhost:8080/update/${this.user.id}`, 
        method: 'GET',
        success: (res) => {
          console.log('接口返回:', res);
          if (res.data && res.data.code === 1 && res.data.data) {
            // 更新用户数据
            this.user = {
              ...res.data.data,
              avatar: res.data.data.avatar || '/static/avatar.png'
            };
            // 同步到全局，方便别处使用
            getApp().globalData.user = this.user;
          } else {
            uni.showToast({
              title: '获取用户信息失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>
<style lang="scss">
/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  color: #333;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 返回按钮样式 */
.nav-back {
  font-size: 36rpx;
  color: #333;
}

/* 导航标题样式 */
.nav-title {
  font-size: 32rpx;
  font-weight: 600;
}

/* 深色模式下导航栏样式 */
.nav-bar.dark {
  background: #1e1e1e;
  color: #fff;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.5);
}

.nav-bar.dark .nav-back,
.nav-bar.dark .nav-title {
  color: #fff;
}

/* 页面主体区域样式 */
.container {
  min-height: 100vh;
  padding: 48rpx;
  background: #f5f5f5;
  color: #333;
}

/* 编辑项列表样式 */
.edit-list {
  width: 100%;
}

/* 每一项编辑内容样式 */
.edit-item {
  display: flex;
  align-items: center;
  padding: 32rpx;
  border-radius: 20rpx;
  background: #fff;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 左侧标签文字样式 */
.label {
  font-size: 32rpx;
  color: #333;
  width: 160rpx;
}

/* 右侧显示当前值样式 */
.value {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  text-align: right;
  margin-right: 20rpx;
}

/* 右侧箭头样式 */
.arrow {
  font-size: 32rpx;
  color: #999;
}

/* 头像样式 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-left: auto;
  margin-right: 20rpx;
}

/* 深色模式样式 */
.dark {
  background: #121212;
  color: #ccc;
}

.dark .edit-item {
  background: #1e1e1e;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.6);
}

.dark .label {
  color: #ccc;
}

.dark .value {
  color: #999;
}

.dark .arrow {
  color: #666;
}
</style>